<template>
  <div class="my-center">
    <my-center-header/>
    <white-space/>
    <my-orders/>
    <white-space/>
    <van-cell-group>
      <van-cell icon="coupon-o" title="优惠券" is-link center to="/coupons"/>
      <van-cell icon="shopping-cart-o" title="购物车" is-link center to="/cart"/>
      <van-cell icon="location-o" title="收货地址" is-link center to="/addresses"/>
      <van-cell icon="circle" title="账号与安全" is-link center/>
      <van-cell icon="user-o" title="个人信息" is-link center :to="'/customers/' + customerId"/>
    </van-cell-group>
    <white-space/>
    <van-cell-group>
      <van-cell icon="flag-o" title="问题反馈" is-link center/>
      <van-cell icon="apps-o" title="关于微商城" is-link center/>
    </van-cell-group>
    <white-space/>
    <van-cell-group>
      <van-cell title-class="my-center-logout" title="安全退出" clickable center @click.stop="handleLogout"/>
    </van-cell-group>
    <tabbar/>
  </div>
</template>

<script>
import Tabbar from "@/components/Tobbar"
import { Cell, CellGroup, Image } from "vant"
import MyOrders from "@/views/my-center/MyOrders"
import WhiteSpace from "@/components/WhiteSpace"
import WingBlank from "@/components/WingBlank"
import MyCenterHeader from "@/views/my-center/MyCenterHeader"
import { security } from "@mall/api-services"

const { SecurityUserHolder } = security

export default {
  name: "MyCenter",
  components: {
    MyCenterHeader,
    WingBlank,
    WhiteSpace,
    MyOrders,
    Tabbar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Image.name]: Image,
  },
  computed: {
    customerId() {
      return SecurityUserHolder.getUserId()
    },
  },
  methods: {
    handleLogout() {
      SecurityUserHolder.logout()
      const query = {}
      const user = SecurityUserHolder.getUser()
      if (user) {
        const { mobile } = user
        query.mobile = mobile
      }

      this.$router.push({
        path: "/login",
        query,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.my-center {

  .my-center-logout {
    text-align: center;
  }
}
</style>
